<template>
  <el-dialog v-model="isStatistics" v-if="isStatistics" title="进度统计" width="1400" body-class="QR-code-dialog-body">
    <el-tabs v-model="selectTab" class="demo-tabs" @tab-click="handleTabChange">
      <el-tab-pane
        :label="item.label"
        :name="item.prop"
        v-for="item in tabOption.column"
        :key="item.prop"
      ></el-tab-pane>
    </el-tabs>
    <!-- <div class="tab-content">
    </div> -->
    <basicEcharts v-show="selectTab === 1" :sendTrialVal="sendTrialVal" />
    <planEcharts v-if="selectTab === 2" :sendTrialVal="sendTrialVal" />
    <locationEcharts v-if="selectTab === 3" :sendTrialVal="sendTrialVal" />
    <workload v-if="selectTab === 4" :sendTrialVal="sendTrialVal" />
  </el-dialog>
</template>
<script setup>
import basicEcharts from './basicEcharts.vue'
import planEcharts from './planEcharts.vue'
import locationEcharts from './locationEcharts.vue'
import workload from './workload.vue'
import { ref, reactive, computed, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();
const crud = ref(null);
const store = useStore();
const routerQuery = ref({});
routerQuery.value = route.query;
let isStatistics = ref(false);
let selectTab = ref(1);
let sendTrialVal = ref({})

const handleTabChange = tab => {
  selectTab.value = tab.props.name;
};

const open = (row) => {
  selectTab.value = 1;
  isStatistics.value = true;
  sendTrialVal.value = row;
};

defineExpose({
  open
});

const tabOption = reactive({
  column: [
    {
      label: '基本统计',
      prop: 1,
    },
    {
      label: '进度统计',
      prop: 2,
    },
    {
      label: '地域统计',
      prop: 3,
    },
    {
      label: '工作量统计',
      prop: 4,
    },
  ],
});
</script>
<style scoped>
</style>